<template>
	<div class="actives" v-if="showView">
		<div class="fixed">
			<div class="title flex">
				<div>

				</div>
				<div class="title_left">
					营销活动
				</div>
				<div class="add flex">
					<img @click="creat_c" src="../assets/image/chaungjian.png" />
				</div>
			</div>

			<div class="top ">
				<div class="top_scroll flex">
					<div v-for="(item,index) in nameoptions" v-bind:class="{active:index==isActive}" @click="checkItem(index)">{{item.titile}}</div>
				</div>
			</div>
		</div>
		<div class="lists" v-if="1==1">
			<div class="list " v-for="(item,index) in tableData" :key="index">
				<div v-if="item.coupons_status=='5'" class="mes flex">
					<div class="left">
						<div style="color: #BEC2C5;">编号：{{item.market_id}}</div>
						<div style="color: #BEC2C5;">{{item.coupons_name}}</div>
					</div>
					<div class="right flex">
						<div style="color: #BEC2C5;border: #BEC2C5 1px solid;" v-if="item.coupons_status==5">已拒绝</div>
						<div class="right_foot flex" @click="showtost(item)">
							<span>理由说明</span><img src="../assets/image/liyoushuomings.png" />
						</div>
					</div>
				</div>
				<div v-else class="mes flex">
					<div class="left">
						<div>编号：{{item.market_id}}</div>
						<div>{{item.coupons_name}}</div>
						<!--<div class="flex">
							<span>报名:10</span>
							<span>参团:5</span>
							<span>额数:5</span>
						</div>-->
					</div>
					<div class="right flex">
						<div v-if="item.coupons_status==1">审核中</div>
						<div v-if="item.coupons_status==2">进行中</div>
						<div v-if="item.coupons_status==3">草稿箱</div>
						<div v-if="item.coupons_status==4">暂停</div>
						<div v-if="item.coupons_status==5">已拒绝</div>
						<div v-if="item.coupons_status==6">已过期</div>
					</div>
				</div>
				<div class="show flex" @click="showop(index)" v-if="show!=index&&item.coupons_status!='5'">
					<img style="width: 0.56217rem;height: 0.56217rem;" src="../assets/image/xainshi.png" alt="" />
				</div>
				<div v-show="index == show" class="shows">
					<div v-if="item.coupons_status=='1'" class="operation flex">
						<div class="flex " @click="chexiao(item)">
							<div class="operation_left flex">
								<img src="../assets/image/chexiao.png" />
								<div>撤销</div>
							</div>
							<img src="../assets/image/rc.png" />
						</div>
					</div>
					<div v-if="item.coupons_status=='2'" class="operation flex">
						<div class="flex " style="border-top:1px solid #F5F6FA;border-bottom: 1px solid #F5F6FA;" @click="stops(item)">
							<div class="operation_left flex">
								<img src="../assets/image/zanting.png" />
								<div>暂停发放</div>
							</div>
							<div class="flex" style="align-items: center;">
								<div class="status">发放中</div>
							</div>
						</div>
						<div class="flex " @click="skip_quan_share(item)">
							<div class="operation_left flex">
								<img src="../assets/image/weiduanyingxiao.png" />
								<div>微端营销</div>
							</div>
							<img src="../assets/image/rc.png" />
						</div>
						<!-- <div class="flex " @click="skip_market_datail(item)">
							<div class="operation_left flex">
								<img src="../assets/image/yingxiaoxiangqing.png" />
								<div>营销详细</div>
							</div>
							<img src="../assets/image/rc.png" />
						</div> -->
					</div>
					<div v-if="item.coupons_status=='3'" class="operation flex">
						<div class="flex " @click="deletes(item)">
							<div class="operation_left flex">
								<img src="../assets/image/shanchu.png" />
								<!--<img v-if="i.name=='编辑'" src="../assets/image/binaji.png" />-->
								<div>删除</div>
							</div>
							<img src="../assets/image/rc.png" />
						</div>
						<div class="flex " @click="creat_c(item)">
							<div class="operation_left flex">
								<img src="../assets/image/binaji.png" />
								<div>编辑</div>
							</div>
							<img src="../assets/image/rc.png" />
						</div>
					</div>
					<div v-if="item.coupons_status=='4'" class="operation flex">
						<div class="flex " style="border-top:1px solid #F5F6FA;border-bottom: 1px solid #F5F6FA;" @click="fafang(item)">
							<div class="operation_left flex">
								<img src="../assets/image/juxu.png" />
								<div>继续发放</div>
							</div>
							<div class="flex" style="align-items: center;">
								<div class="status">暂停中</div>
							</div>
						</div>
						<div class="flex ">
							<div class="operation_left flex" @click="skip_market_datail(item)">
								<img src="../assets/image/yingxiaoxiangqing.png" />
								<div>营销详细</div>
							</div>
							<img src="../assets/image/rc.png" />
						</div>
					</div>
					<div class="show flex" @click="showop(index)" v-if="show==index">
						<img style="width: 0.56217rem;height: 0.56217rem;" src="../assets/image/shouqi.png" alt="" />
					</div>
				</div>
			</div>
		</div>
		<div class="none flex" v-else>
			空空如也哦~
		</div>
		<!--是否暂停发券的弹窗-->
		<div class="mask">
			<div class="tip flex">
				<div class="tip_title flex">
					<div>

					</div>
					<div>
						是否要暂停发券
					</div>
					<img @click="yincang" src="../assets/image/chahao.png" />
				</div>
				<div class="center">
					<div>
						提示&nbsp;:&nbsp;&nbsp;暂停发券不会影响已发出给用户的券码核销使用
					</div>
				</div>
				<div class="tip_btn flex">
					<div class="queding " @click="changestatus">
						是
					</div>
					<div class="quxiao " @click="yincang">否</div>
				</div>
			</div>
		</div>
		<!--查看拒绝理由的弹窗-->
		<div class="mask_jujie">
			<div class="tip flex">
				<div class="tip_title flex">
					<div>

					</div>
					<div>
						理由说明
					</div>
					<img @click="yincang" src="../assets/image/chahao.png" />
				</div>
				<div class="center flex">
					<div class="flex">
						{{objection}}
					</div>
				</div>
				<div class="tip_btn flex">
					<div @click="yincang">我知道了</div>
				</div>
			</div>
		</div>
		<!--提示发券已暂停的弹窗-->
		<div class="mask_tip">
			<div class="tip flex">
				<div class="tip_title flex">
					<div>
					</div>
					<div>
						发券已暂停
					</div>
					<div></div>
				</div>
				<div class="center">
					<div>
						当前活动已置入已“暂停”发券 活动列表中
					</div>
				</div>
				<div class="tip_btn flex">
					<div @click="yincang">我知道了</div>
				</div>
			</div>
		</div>
		<!--是否开始发券的弹窗-->
		<div class="mask_fafang">
			<div class="tip flex">
				<div class="tip_title flex">
					<div>

					</div>
					<div>
						是否要开始发券
					</div>
					<img @click="yincang" src="../assets/image/chahao.png" />

				</div>
				<div class="tip_btn flex">
					<div class="queding" @click="change_fafang">
						是
					</div>
					<div class="quxiao" @click="yincang">否</div>
				</div>
			</div>
		</div>
		<!--提示发券已开始发放的弹窗-->
		<div class="mask_fafang_tip">
			<div class="tip flex">
				<div class="tip_title flex">
					<div>

					</div>
					<div>
						发券已开始发放
					</div>
					<div></div>
				</div>
				<div class="center">
					<div>
						当前活动已置入已“进行中”发券 活动列表中
					</div>
				</div>
				<div class="tip_btn flex">
					<div @click="yincang">我知道了</div>
				</div>
			</div>
		</div>
		<!--是否删除的弹窗-->
		<div class="mask_delete">
			<div class="tip flex">
				<div class="tip_title flex">
					<div>

					</div>
					<div>
						是否要删除该券
					</div>
					<img @click="yincang" src="../assets/image/chahao.png" />
				</div>
				<div class="tip_btn flex">
					<div class="queding" @click="change_delete">
						是
					</div>
					<div class="quxiao" @click="yincang">否</div>
				</div>

			</div>
		</div>
		<!--提示发券已开始发放的弹窗-->
		<div class="mask_delete_tip">
			<div class="tip flex">
				<div class="tip_title flex">
					<div>

					</div>
					<div>
						发券已删除
					</div>
					<div></div>

				</div>
				<div class="tip_btn flex">
					<div @click="yincang">我知道了</div>
				</div>

			</div>
		</div>

		<!--是否撤销的弹窗-->
		<div class="mask_chexiao">
			<div class="tip flex">
				<div class="tip_title flex">
					<div>

					</div>
					<div>
						是否要撤销该券
					</div>
					<img @click="yincang" src="../assets/image/chahao.png" />

				</div>


				<div class="tip_btn flex">
					<div class="queding" @click="change_chexaio">
						是
					</div>
					<div class="quxiao" @click="yincang">否</div>
				</div>

			</div>
		</div>
		<!--提示发券已撤销的弹窗-->
		<div class="mask_chexiao_tip">
			<div class="tip flex">
				<div class="tip_title flex">
					<div>

					</div>
					<div>
						发券已撤销
					</div>
					<div></div>

				</div>
				<div class="tip_btn flex">
					<div @click="yincang">我知道了</div>
				</div>

			</div>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				showView: true,
				isActive: 0,
				show: -1,
				activeIndex: -1,
				stop: 1,
				liyou: "拒绝该商家参与此拼券活动的拒绝理由说明，仅文字展示即可，点击该弹窗右上角的“×”，或下方“我知道了”按钮，效果均为关闭该弹窗",
				nameoptions: [{
						titile: '全部',
						isIndex: 0
					},
					{
						titile: '待审核',
						isIndex: 1
					},
					{
						titile: '进行中',
						isIndex: 2
					},
					{
						titile: '草稿箱',
						isIndex: 3
					},
					{
						titile: '暂停',
						isIndex: 4
					},
					{
						titile: '已拒绝',
						isIndex: 5
					}
				],
				tableHeight: null,
				tableData: '',
				market_id: '',
                objection:''
			}
		},
		//在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
		created: function() {

		},
		methods: {
			allList() { //优惠券全部列表
				var _this = this;
				var qs = require('qs');

				_this.$http.post(_this.baseURL + '/index.php/waveguest/market/market_list',qs.stringify({'market_store_id':localStorage.getItem("store_id"),"key":localStorage.getItem("key")})).then(response => {
					
					console.log(response)
					_this.tableData = response.data.data
				}).catch(error => {

				});
			},
			checkItem(index) { //tab切换请求
				var _this = this;
				this.isActive = index;
				var coupons_status = index
				var qs = require('qs');
				_this.$http.post(_this.baseURL + '/index.php/waveguest/market/market_list', qs.stringify({
					"coupons_status": coupons_status,
					'market_store_id':localStorage.getItem("store_id"),
					"key":localStorage.getItem("key")
				})).then(response => {
					console.log(response)
					_this.tableData = response.data.data
				}).catch(error => {

				});
			},
			showop(index) {
				let that = this;
				if (that.show == index) {
					that.show = -1; //在这里就将它赋值为-1  由于：-1 !=  index 所以其他内容隐藏 ，被点击的则打开

					console.log()
				} else {
					that.show = index; //这里是把index赋值给isShow，isShow=index则显示grgrr
				}

			},
			//查看详情
			creat_c(e) {
				console.log(e)
				this.$router.push({
					path: '/Create_coupons',
					query: {
						id: e.market_id
					}
				});
			},
			skip_quan_share(e) {
				this.$router.push({
					path: '/quan_share',
					query: {
						id: e.market_id
					}
				});

			},
			skip_market_datail(e) {
				this.$router.push({
					path: '/market_detail',
					query: {
						id: e.market_id
					}
				});


			},
			stops(e) { //暂停发放弹窗
				$(".mask").css('display', 'block');
				console.log(e)
				this.market_id = e.market_id

			},
			fafang(e) {
				this.market_id = e.market_id
				$(".mask_fafang").css('display', 'block');
			},
			deletes(e) {
				this.market_id = e.market_id
				$(".mask_delete").css('display', 'block');
			},
			showtost(e) {
				this.objection = e.objection
				$(".mask_jujie").css('display', 'block');
			},
			chexiao(e) {
				this.market_id = e.market_id
				$(".mask_chexiao").css('display', 'block');
			},
			changestatus() { //暂停发放
				var _this = this;
				var qs = require('qs');
				var stats = {
					"coupons_status": 4,
					"market_id": _this.market_id,
					"key":localStorage.getItem("key")
				}
				_this.$http.post(_this.baseURL + '/index.php/waveguest/market/save_status', qs.stringify(stats)).then(response => {
					console.log(response)
					if (response.status == 200) {
						$(".mask").css('display', 'none');
						$(".mask_tip").css('display', 'block');
					}
					// _this.tableData = response.data.data
				}).catch(error => {

				});

			},
			change_fafang() {
				var _this = this;
				var qs = require('qs');
				var stats = {
					"coupons_status": 2,
					"market_id": _this.market_id,
					"key":localStorage.getItem("key")
				}
				_this.$http.post(_this.baseURL + '/index.php/waveguest/market/save_status', qs.stringify(stats)).then(response => {
					console.log(response)
					if (response.status == 200) {
						$(".mask_fafang").css('display', 'none');
						$(".mask_fafang_tip").css('display', 'block');
					}
				}).catch(error => {

				});

			},
			change_delete() {
				var _this = this;
				var qs = require('qs');
				var stats = {
					"market_id": _this.market_id,
					"key":localStorage.getItem("key")
				}
				_this.$http.post(_this.baseURL + '/index.php/waveguest/market/market_del', qs.stringify(stats)).then(response => {
					console.log(response)
					if (response.data.data == 1) {
						$(".mask_delete").css('display', 'none');
						$(".mask_delete_tip").css('display', 'block');
					}
				}).catch(error => {

				});

			},
			change_chexaio() {
				var _this = this;
				var qs = require('qs');
				var stats = {
					"coupons_status": 3,
					"market_id": _this.market_id,
					"key":localStorage.getItem("key")
				}
				_this.$http.post(_this.baseURL + '/index.php/waveguest/market/save_status', qs.stringify(stats)).then(response => {
					console.log(response)
					if (response.status == 200) {
						$(".mask_chexiao").css('display', 'none');
						$(".mask_chexiao_tip").css('display', 'block');
					}
					// _this.tableData = response.data.data
				}).catch(error => {

				});

			},
			yincang() {
				this.isActive = 0;
				this.allList();
				// this.showView = false // 通过v-if移除router-view节点
				//      this.$nextTick(() => {
				//        this.showView = true // DOM更新后再通过v-if添加router-view节点
				//      })
				$(".mask").css('display', 'none');
				$(".mask_tip").css('display', 'none');
				$(".mask_jujie").css('display', 'none');
				$(".mask_fafang_tip").css('display', 'none');
				$(".mask_fafang").css('display', 'none');
				$(".mask_delete").css('display', 'none');
				$(".mask_delete_tip").css('display', 'none');
				$(".mask_chexiao").css('display', 'none');
				$(".mask_chexiao_tip").css('display', 'none');

			},

		},
		mounted() {
			this.allList()
			// this.checkItem()     
		}
	}
</script>

<style>

</style>
<style scoped="scoped">
	.active {
		color: #007AFF;
	}

	.top {
		font-size: 0.60869rem;
		width: 100%;
		max-width: 640px;
		overflow-x: auto;
		overflow-y: hidden;
		background: white;
	}

	.top_scroll {
		min-width: 110%;
	}

	.top_scroll>div {
		width: 3rem;
		text-align: center;
	}

	.mes {
		margin: 0.5rem;
		font-size: 0.8rem;
		justify-content: space-between;
	}

	.title_left {
		font-size: 0.6956rem;
		font-weight: bold;
		color: #3e474e;
	}

	.lists {


		-webkit-overflow-scrolling: touch;
		position: fixed;
		bottom: 2rem;
		top: 4rem;
		background: #F5F6FA;
		width: 100%;
		padding: 1rem 0;
		overflow-y: scroll;


	}

	.list {
		/*border: 1px solid white;*/
		margin-bottom: 0.5rem;
		margin-left: 0.5rem;
		margin-right: 0.5rem;
		padding: 0.1rem 0.3rem;
		background: url(../assets/image/beijing.png) no-repeat;
		background-size: 100%;
		border-radius: 10px;
		flex-direction: column;
	}

	.right {
		flex-direction: column;
	}

	.show {
		justify-content: center;
		align-items: center;
		height: 1rem;
	}

	.fixed {
		position: fixed;
		top: 0;
		background: white;
		width: 100%;
		max-width: 640px;
		z-index: 99;
	}

	.title {
		justify-content: space-between;
		width: 90%;
		padding: 5%;
		background: white;
	}

	.title>div {
		width: calc(100%/3);
		text-align: center;
	}

	.add {
		justify-content: flex-end;
	}

	.add>img {
		width: 1rem;
		height: 1rem;
	}

	.mes>.left>div:nth-child(1) {
		color: #868E91;
		font-size: 0.47826rem;
	}

	.mes>.left>div:nth-child(2) {
		color: #3E474E1;
		font-size: 1.10869rem;
		font-weight: 400;
	}

	.mes>.left>div:nth-child(3) {
		color: #3E474E1;
		font-size: 0.4347rem;
		font-weight: 400;
	}

	.mes>.left>div:nth-child(3)>span {
		margin-right: 0.9rem;
	}

	.mes>.right>div:nth-child(1) {
		color: #007AFF;
		font-size: 0.56521rem;
		border: 1px solid #007AFF;
		padding: 0.1rem 0.5rem;
		border-radius: 0.5rem;
	}

	.status {
		color: #007AFF;
		font-size: 0.56521rem;
		border: 1px solid #007AFF;
		padding: 0.1rem 0.5rem;
		border-radius: 0.5rem;
	}

	.mes>.right>div:nth-child(2) {
		color: #007AFF;
		font-size: 1.10869rem;
		font-weight: 400;
	}

	.operation {

		justify-content: space-between;
		align-items: center;
		margin: auto;
		font-size: 0.60869rem;
		padding: 0.2rem 0;
		flex-direction: column;
	}

	.operation>div {
		width: 100%;
		height: 1.5rem;
		justify-content: space-between;
		align-items: center;
	}

	.operation_left {
		height: 100%;
		align-items: center;
	}

	.operation_left img {
		width: 0.3919rem;
		height: 0.3919rem;
		padding-right: 0.5rem;
	}

	.operation>div>img {
		width: 0.2919rem;
		height: 0.5819rem;
	}

	.shows {
		width: 95%;
		margin: auto;
	}

	.mask,
	.mask_jujie,
	.mask_tip,
	.mask_fafang,
	.mask_fafang_tip,
	.mask_delete,
	.mask_delete_tip,
	.mask_chexiao,
	.mask_chexiao_tip {
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		transition: all 0.2s ease-in;
		z-index: 99;
		display: none;

	}

	.mask_jujie .center div {
		width: 80%;
		margin-left: 10%;
		margin-top: -0.5rem;
		font-size: 0.565217rem;
	}

	.mask_jujie .tip_btn,
	.mask_tip .tip_btn,
	.mask_fafang_tip .tip_btn,
	.mask_delete_tip .tip_btn,
	.mask_chexiao_tip .tip_btn {
		width: 100%;
		height: 1.9043rem;
		justify-content: center;
		align-items: center;
		margin-top: 1rem;
		margin-bottom: 0.5rem
	}

	.mask_jujie .tip_btn>div,
	.mask_tip .tip_btn>div,
	.mask_fafang_tip .tip_btn>div,
	.mask_delete_tip .tip_btn>div,
	.mask_chexiao_tip .tip_btn>div {
		width: 6.3913rem;
		height: 1.3043rem;
		background: #007AFF;
		border-radius: 0.47826rem;
		color: white;
		font-size: 0.60869rem;
		text-align: center;
		line-height: 1.3043rem;
	}

	.tip {

		width: 13.78260rem;
		margin: 50vh auto;
		transform: translateY(-50%);
		background: white;
		border-radius: 0.5rem;
		flex-direction: column;
	}

	.tip_title {
		width: 90%;
		padding: 5%;
		font-size: 0.7826rem;
		justify-content: space-between;
		line-height: 2rem;
	}

	.tip_title img {
		width: 0.565212rem;
		height: 0.565212rem;


	}

	.center div {
		width: 60%;
		margin-left: 20%;
		color: #3E474E;
		font-size: 0.565217rem;

	}

	.tip_btn {
		font-size: 0.6087rem;
		justify-content: space-between;
		align-items: center;
	}

	.queding,
	.quxiao {
		width: 4.9782rem;
		height: 1.3043rem;
		text-align: center;
		margin-top: 1.6rem;
		margin-bottom: 0.5rem;

		color: #868E91;
		line-height: 1.3043rem;
		align-items: center;

	}

	.quxiao {
		color: white;
		background: #007AFF;
		border-radius: 10px;
		margin-right: 1rem;
	}

	.queding {
		margin-left: 1rem;
	}

	.right_foot {

		align-items: center;
		margin-top: 1rem;
	}

	.right_foot>img {
		width: 0.47826rem;
		height: 0.47826rem;
		padding-left: 0.2rem;
	}

	.right_foot>span {
		font-size: 0.565217rem;
	}

	.none {
		position: fixed;
		width: 100%;
		height: 100%;
		background: #F5F6FA;
		justify-content: center;
		align-items: center;
		font-size: 0.5217rem;
	}
</style>
